<template>
  <div class="index">
    <div style="padding: 0.2rem 0.3rem; position: relative; background: #1989fa; height: 0.9rem;" class="flexcc">
    	<div style="position: absolute; left: 0.3rem; top: 0rem; height: 100%;" class="flexc"><van-icon name="arrow-left" size="0.3rem" style="font-weight: bold;" @click="back()" color="#fff" /></div>
    	<div style="color: #fff;  font-weight: bold;">拜访详情</div>
    </div>

    <div style="padding: 0.3rem;">

          <div class="flexc" style="margin-bottom: 0.2rem;">
          		<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">拜访单位名称</div>
          		<div style="flex-grow: 1; color: #666;">{{detail.dwmc}}</div>
          	</div>
          	<div class="flexc" style="margin-bottom: 0.2rem;">
          		<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">被拜访人姓名</div>
          		<div style="flex-grow: 1; color: #666;">{{detail.bbfrxm}}</div>
          	</div>
          	<div class="flexc" style="margin-bottom: 0.2rem;">
          		<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">新客户/老客户</div>
          		<div style="flex-grow: 1; color: #666;">{{detail.xlkh}}</div>
          	</div>
          	<div class="flexc" style="margin-bottom: 0.2rem;">
          		<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">被拜访人联系方式</div>
          		<div style="flex-grow: 1; color: #666;">{{detail.bbfrlxfs}}</div>
          	</div>
          	<div class="flexc" style="margin-bottom: 0.2rem;">
          		<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">预计体检人数</div>
          		<div style="flex-grow: 1; color: #666;">{{detail.yjtjrs}}</div>
          	</div>
          	<div class="flexc" style="margin-bottom: 0.2rem;">
          		<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">预计客单价</div>
          		<div style="flex-grow: 1; color: #666;">{{detail.yjkdj}}</div>
          	</div>
          	<div class="flexc" style="margin-bottom: 0.2rem;">
          		<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">预计体检时间</div>
          		<div style="flex-grow: 1; color: #666;">{{detail.yjtjsj}}</div>
          	</div>
          	<div class="flexc" style="margin-bottom: 0.2rem;">
          		<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">拜访方式</div>
          		<div style="flex-grow: 1; color: #666;">{{detail.bffs}}</div>
          	</div>
          	<div class="flexc" style="margin-bottom: 0.2rem;">
          		<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">签单可能性(%)</div>
          		<div style="flex-grow: 1; color: #666;">{{detail.qdkn}}</div>
          	</div>
            <div class="flexc" style="margin-bottom: 0.2rem;">
            	<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">主要事宜</div>
            	<div style="flex-grow: 1; color: #666;">{{detail.zysy}}</div>
            </div>
            <div class="flexc" style="margin-bottom: 0.2rem;">
            	<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">备注</div>
            	<div style="flex-grow: 1; color: #666;">{{detail.bz}}</div>
            </div>
            <div class="flexc" style="margin-bottom: 0.2rem;">
            	<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">图片</div>
            	<div style="flex-grow: 1; color: #666;" class="flexc">
                <div v-for="item in pics" :key="item.id">
                  <a :href="'http://www.trtijian.com/Visit/DownloadImage?id=' + item.id " target="_blank" style="color: #1989fa;">
                    <img :src="'http://www.trtijian.com/Visit/DownloadImage?id=' + item.id "  style="max-width: 1rem; max-height: 1rem;  margin: 0.1rem;" >
                  </a>
                </div>
              </div>
            </div>
            <div class="flexc" style="margin-bottom: 0.2rem;">
            	<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">文件</div>
            	<div style="width: 4rem; overflow: hidden; color: #666;">
            	  <div v-for="(item,index) in wenjians" :key="item.id" style="margin-bottom: 0.1rem; ">
                  <a :href="`http://www.trtijian.com/Visit/DownloadFile?id=${item.id}`" target="_blank" style="color: #1989fa;">查看文件{{index++}}</a>

            	  </div>
            	</div>
            </div>
            <div class="flexc" style="margin-bottom: 0.2rem;">
            	<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">所在位置</div>
            	<div style="flex-grow: 1; color: #666;">{{detail.szwz}}</div>
            </div>
            <div class="flexc" style="margin-bottom: 0.2rem;">
            	<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">创建时间</div>
            	<div style="flex-grow: 1; color: #666;">{{detail.createtime}}</div>
            </div>
            <div class="flexc" style="margin-bottom: 0.2rem;">
            	<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">销售负责人姓名</div>
            	<div style="flex-grow: 1; color: #666;">{{detail.createname}}</div>
            </div>
            <div class="flexc" style="margin-bottom: 0.2rem;">
            	<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">最近一次修时间</div>
            	<div style="flex-grow: 1; color: #666;">{{detail.lasttime}}</div>
            </div>
            <div class="flexc" style="margin-bottom: 0.2rem;">
            	<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">审批状态</div>
            	<div style="flex-grow: 1; color: #666;">
                <div style="color: #259b24; " v-if="detail.spzt == 0">已审批</div>
                <div style="color: #1989fa; " v-if="detail.spzt == 1">待审批</div>
                <div style="color: #f00; " v-if="detail.spzt == 2">不通过</div>
              </div>
            </div>
            <!-- <div class="flexc" style="margin-bottom: 0.2rem;">
            	<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">显示状态</div>
            	<div style="flex-grow: 1; color: #666;">
                <div style="color: #259b24; " v-if="detail.spzt == 0">正常显示</div>
                <div style="color: #1989fa; " v-if="detail.spzt == 1">删除</div>
                <div style="color: #f00; " v-if="detail.spzt == 2">草稿状态</div>
              </div>
            </div> -->

            <van-cell-group v-if="what == 'shenpi'">
              <van-field required v-model="shenpiall.spyj" label="审批意见" placeholder="请输入审批意见" />
            </van-cell-group>

          <div class="flexcc" style="margin-top: 0.3rem;" v-if="what == 'shenpi'">
          	<van-button type="info" size="small" style="margin-right: 0.3rem; padding: 0 15px; border-radius: 0.1rem;" @click="shenpigo(0)">审批通过</van-button>
          	<van-button type="danger" size="small" style=" padding: 0 15px; border-radius: 0.1rem;" @click="shenpigo(1)">审批不通过</van-button>
          </div>

    </div>
  </div>
</template>

<script>
  var h = document.documentElement.clientWidth / 7.5 + 'px';
  document.documentElement.style.fontSize = h;
	export default {
		name: 'index',
		data() {
			return {
         detail:"",
         what:"",
         title:"拜访详情",
         shenpiall:{
           bfid:"",
           fzrid:JSON.parse(localStorage.getItem('person')).userid,
           spyj:"",
           spzt:""
         },
         pics:[],
         wenjians:[]
			}
		},
		created() {
      this.getlist()
      if(this.$route.query.shenpi){
        this.what = 'shenpi'
        this.title = '拜访审批'
      }
		},
		mounted() {

		},
		methods: {
      shenpigo:function(val){
        this.shenpiall.spzt = val
        this.shenpiall.bfid = this.detail.id
        axios.post('/Process/updateVisitProcess',this.shenpiall).then((response)=>{
        	if (response.data.state == 200) {
            vant.Toast('审批成功');
            this.$router.go(-1)
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },

      getlist:function(){
        axios.get('/Visit/queryVisitDetail?bfid='+this.$route.query.id).then((response)=>{
        	if (response.data.state == 200) {
            this.detail = response.data.data



            axios.get('/Visit/queryVisitFileList?bfid='+this.$route.query.id).then((response2)=>{
            	if (response2.data.state == 200) {
                this.wenjians = response2.data.data
            	} else {
                vant.Toast(response2.data.msg);
            	}
            })
            axios.get('/Visit/queryVisitImageList?bfid='+this.$route.query.id).then((response2)=>{
            	if (response2.data.state == 200) {
                this.pics = response2.data.data
            	} else {
                vant.Toast(response2.data.msg);
            	}
            })
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      }
    }
	}
</script>

<style scoped lang="less">

</style>
